<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>电影推荐首页--推荐</title>
    <meta name="referrer" content="no-referrer" /> {% comment %} 不显示图片的时候添加 {% endcomment %}
    <!-- Bootstrap core CSS -->
    <link href="/static/css/bootstrap.css" rel="stylesheet">

    <!-- Add custom CSS here -->
    <link href="/static/css/sb-admin.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">
    <!-- Page Specific CSS -->
    <link rel="stylesheet" href="/static/css/morris-0.4.3.min.css">
</head>

<body>
<div id="app">
    <div id="wrapper">

        <!-- Sidebar -->
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html">电影推荐系统</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                {% comment %}  菜单栏  {% endcomment %}
                <ul class="nav navbar-nav side-nav">

                    <li class=""><a href="http://127.0.0.1:8000/index/">
                        <i class="fa fa-indent"></i>&nbsp;&nbsp;&nbsp;首页</a>
                    </li>

                     <li class="">
                         <a href="http://127.0.0.1:8000/renmen/href/">
                       <i class="fa fa-fire"></i>&nbsp;&nbsp;&nbsp;热门电影推荐</a>
                    </li>

                     <li class="">
                         <a href="http://127.0.0.1:8000/new/href/">
                       <i class="fa fa-text-height"></i>&nbsp;&nbsp;最新电影推荐</a>
                    </li>

                    <li class="">
                         <a href="http://127.0.0.1:8000/jingdian/href/">
                       <i class="fa fa-bullhorn"></i>&nbsp;&nbsp;经典电影推荐</a>
                    </li>

                    <li class="">
                         <a href="http://127.0.0.1:8000/top/href">
                       <i class="fa fa-glass"></i>&nbsp;&nbsp;豆瓣高分电影推荐</a>
                    </li>

                     <li class="">
                         <a href="http://127.0.0.1:8000/comment/href">
                      <i class="fa fa-sort-amount-desc"></i>&nbsp;&nbsp;豆瓣最新影评</a>
                    </li>

                     <li class="">
                         <a href="http://127.0.0.1:8000/updtate/href/">
                       <i class="fa fa-wrench"></i>&nbsp;&nbsp;更新数据系统</a>
                    </li>

                    <li class="">
                         <a href="http://127.0.0.1:8000/all/href">
                      <i class="fa fa-sort-amount-desc"></i>&nbsp;&nbsp;所有电影</a>
                    </li>

                     <li class="active">
                         <a href="http://127.0.0.1:8000/recommend/href">
                      <i class="fa fa-sort-amount-desc"></i>&nbsp;&nbsp;协同过滤推荐</a>
                    </li>

                </ul>

                <ul class="nav navbar-nav navbar-right navbar-user">
                    <li class="dropdown messages-dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-envelope"></i>
                            Messages
                            <span class="badge">7</span> <b class="caret"></b></a>

                    </li>
                    <li class="dropdown alerts-dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bell"></i> Alerts
                            <span
                                    class="badge">3</span> <b class="caret"></b></a>

                    </li>
                    <li class="dropdown user-dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i>
                            {%verbatim %} {{ userss }} {% endverbatim %} <b
                                    class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#"><i class="fa fa-user"></i> Profile</a></li>
                            <li><a href="#"><i class="fa fa-envelope"></i> Inbox <span class="badge">7</span></a></li>
                            <li><a href="#"><i class="fa fa-gear"></i> Settings</a></li>
                            <li class="divider"></li>
                            <li><a href="http://127.0.0.1:8000/login/"><i class="fa fa-power-off"></i> Log Out</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </nav>
        <div id="page-wrapper">

            <div style="height: 1200px;width: 100%;overflow-y: auto">
                <table class="table table-bordered" style="text-align: center;">
                    <thead>
                    <tr style="background: dodgerblue;font-size: 18px">
                        <th scope="col" style="width: 100px;text-align: center" >电影排行</th>
                        <th scope="col" style="width: 300px;text-align: center" >电影海报</th>
                        <th scope="col" style="width: 250px;text-align: center">电影名称</th>
                        <th scope="col" style="width: 250px;text-align: center">电影评分</th>
                        <th scope="col" style="width: 250px;text-align: center">时间</th>
                        <th scope="col" style="width: 250px;text-align: center">操作</th>
                    </tr>
                    </thead>
                    <tbody>

                    <tr v-for="item,key in remen_data" style="font-size: 15px">
                        <td scope="row" style="line-height: 168px;font-size: 22px;">{% verbatim %} {{ key+1 }} {% endverbatim %}</td>
                        <td scope="row"><img :src="item.src" style="width: 115px;height:172.5px"></td>

                        <td scope="row" style="line-height: 168px;font-size: 22px;">{% verbatim %} {{ item.title }} {% endverbatim %}</td>
                        <td scope="row" style="line-height: 168px;font-size: 22px;">{% verbatim %} {{ item.rate }} {% endverbatim %}</td>

                        <td scope="row" style="line-height: 168px;font-size: 22px;">{% verbatim %} {{ item.time }} {% endverbatim %}</td>
                        <td scope="row" style="line-height: 168px;">
                            <a :href="item.url" class="btn btn-success" >查询详情</a>
                        </td>
                    </tr>

                    </tbody>
                </table>
            </div>


        </div><!-- /#page-wrapper -->

    </div><!-- /#wrapper -->
</div>
<!-- JavaScript -->
<script src="/static/js/jquery-1.10.2.js"></script>
<script src="/static/js/bootstrap.js"></script>

<!-- Page Specific Plugins -->
<script src="/static/js/raphael-min.js"></script>
<script src="/static/js/morris-0.4.3.min.js"></script>
<script src="/static/js/morris/chart-data-morris.js"></script>
<script src="/static/js/tablesorter/jquery.tablesorter.js"></script>
<script src="/static/js/tablesorter/tables.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            userss: "",
            remen_data: [],
        },
        created() {
            // 判断是否已经登录
            this.userss = sessionStorage.getItem("username");
            if (this.userss == null) {
                alert("抱歉，您还未登录");
                window.location.href = "http://127.0.0.1:8000/login/"
            }

            axios.get('http://127.0.0.1:8000/recommend/show/?page=1&size=5', {}).then(response => {
                response.data.data.some((item, i) => {
                    this.remen_data.push({
                        rate: item.rate,
                        title: item.title,
                        url: item.url,
                        src: item.src,
                        time: item.time,
                        pk: item.id,
                    })
                })

            }).catch(error => {
                console.log("请求异常", error);
                alert("请求异常")
            })

        },


        methods: {
            look(event) {
                axios.post('http://127.0.0.1:8000/look/get/', {
                    username: this.userss,
                    news_id : event.target.getAttribute('value')
                }).then(response => {


                }).catch(error => {
                    console.log("请求异常", error);
                    alert("请求异常")
                })
            }
        }
    })
</script>


</body>
</html>
